<template>
  <div class="control-group">
    <div class="control-content">
      <div class="content-value">
        <el-tabs
          class="control sort"
          :value="current"
          type="card"
          @tab-click="handleClick"
          @tab-remove="handleTabRemove"
          @contextmenu.native="handleContextmenu"
        >
          <el-tab-pane
            v-for="page in opened"
            :key="page.fullPath"
            :label="page.meta.title || '未命名'"
            :name="page.fullPath"
            :closable="isTabClosable(page)"
          />
        </el-tabs>
      </div>
    </div>
    <div class="control-btn">
      <el-dropdown
        size="default"
        split-button
        @click="closeAll"
        @command="(command) => handleControlItemClick(command)"
      >
        <i class="el-icon-circle-close"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="left">
            <i class="el-icon-arrow-left"></i>
            关闭左侧
          </el-dropdown-item>
          <el-dropdown-item command="right">
            <i class="el-icon-arrow-right"></i>
            关闭右侧
          </el-dropdown-item>
          <el-dropdown-item command="other">
            <i class="el-icon-close"></i>
            关闭其它
          </el-dropdown-item>
          <el-dropdown-item command="all">
            <i class="el-icon-circle-close"></i>
            全部关闭
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
// import Sortable from 'sortablejs'

export default {
  data() {
    return {
      contextmenuFlag: false,
      contentmenuX: 0,
      contentmenuY: 0,
      contextmenuListIndex: [
        { icon: "times-circle", title: "关闭全部", value: "all" }
      ],
      contextmenuList: [
        { icon: "refresh", title: "刷新", value: "refresh" },
        { icon: "arrow-left", title: "关闭左侧", value: "left" },
        { icon: "arrow-right", title: "关闭右侧", value: "right" },
        { icon: "times", title: "关闭其它", value: "other" },
        { icon: "times-circle", title: "关闭全部", value: "all" }
      ],
      tagName: "/index"
    };
  },
  computed: {
    ...mapState("page", ["opened", "current"])
  },
  methods: {
    ...mapActions("page", [
      "close",
      "closeLeft",
      "closeRight",
      "closeOther",
      "closeAll",
      "openedSort"
    ]),
    /**
     * @description 计算某个标签页是否可关闭
     * @param {Object} page 其中一个标签页
     */
    isTabClosable(page) {
      return page.name !== "ZhControlView";
    },
    /**
     * @description 右键菜单功能点击
     * @param {Object} event 事件
     */
    handleContextmenu(event) {
      let target = event.target;
      // fix https://github.com/d2-projects/d2-admin/issues/54
      let flag = false;
      if (target.className.indexOf("el-tabs__item") > -1) flag = true;
      else if (target.parentNode.className.indexOf("el-tabs__item") > -1) {
        target = target.parentNode;
        flag = true;
      }
      if (flag) {
        event.preventDefault();
        event.stopPropagation();
        this.contentmenuX = event.clientX;
        this.contentmenuY = event.clientY;
        this.tagName = target.getAttribute("aria-controls").slice(5);
        this.contextmenuFlag = true;
      }
    },
    /**
     * @description 右键菜单的 row-click 事件
     * @param {String} command 事件类型
     */
    contextmenuClick(command) {
      this.handleControlItemClick(command, this.tagName);
    },
    /**
     * @description 接收点击关闭控制上选项的事件
     * @param {String} command 事件类型
     * @param {String} tagName tab 名称
     */
    handleControlItemClick(command, tagName = null) {
      if (tagName) this.contextmenuFlag = false;
      const params = { pageSelect: tagName };
      switch (command) {
        case "refresh":
          this.$router.push({ name: "refresh" });
          break;
        case "left":
          this.closeLeft(params);
          break;
        case "right":
          this.closeRight(params);
          break;
        case "other":
          this.closeOther(params);
          break;
        case "all":
          this.closeAll();
          break;
        default:
          this.$message.error("无效的操作");
          break;
      }
    },
    /**
     * @description 接收点击 tab 标签的事件
     * @param {object} tab 标签
     * @param {object} event 事件
     */
    handleClick(tab, event) {
      // 找到点击的页面在 tag 列表里是哪个
      const page = this.opened.find((page) => page.fullPath === tab.name);
      if (page) {
        const { name, params, query } = page;
        this.$router.push({ name, params, query });
      }
    },
    /**
     * @description 点击 tab 上的删除按钮触发这里
     * @param {String} tagName tab 名称
     */
    handleTabRemove(tagName) {
      this.close({ tagName });
    }
  }
  // mounted () {
  // const el = document.querySelectorAll('.sort .el-tabs__nav')[0]
  // Sortable.create(el, {
  //   onEnd: (evt) => {
  //     const { oldIndex, newIndex } = evt
  //     this.openedSort({ oldIndex, newIndex })
  //   }
  // })
  // }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";
.control-group {
  margin-top: 2px;
  display: flex;
  align-items: flex-end;
  background-color: $hamburgerBgColor;

  .control-content {
    width: 100%;
    height: $tagsViewHeight;
    position: relative;
    .content-value {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
    }
    ::v-deep .el-tabs__header {
      margin: 0;
      // border-bottom: 1px solid $activeMenuText;
      border-bottom: 1px solid #00000000;
    }
    ::v-deep .el-tabs__nav {
      // border: 1px solid $tagsViewActiveBgColor;
      border: 1px solid #00000000;

      border-bottom: none;
      border-radius: 0;
      .el-tabs__item {
        color: $tagsViewActiveBgColor;
        // color: $activeMenuText;
        border-left: .1px solid $activeCompanyMenuText;
        // border-left: 1px solid #00000000;

        background-color: $hamburgerBgColor;
        &.is-active {
          border-bottom: none;
          color: $tagsViewActiveBgColor;
          // color: $activeMenuText;
          background-color: $themeColor;
          position: relative;
          &::after {
            content: "";
            width: 100%;
            height: 1px;
            background: $appMainBgColor;
            position: absolute;
            bottom: 0;
            left: 0;
          }
        }
        &.is-closable {
          padding-right: 15px;
          padding-left: 15px;
        }
        &.is-closable:hover {
          padding-right: 15px;
          padding-left: 15px;
        }
        &:first-child {
          border-left: 1px solid #00000000;
        }
        .el-icon-close {
          font-size: 18px;
          line-height: 19px;
          height: 20px;
          width: 20px;
          top: 1px;
          margin-right: 0;
        }
        .el-icon-close:hover {
          background-color: #00000000;
          color: $deleteButtonColor;
          // border: 1px solid $tagsViewActiveBgColor;
          position: relative;
          vertical-align: middle;
          width: 20px;
          margin-right: 0;
          height: 20px;
          line-height: 19px;
          top: 1px;
          right: -2px;
        }
      }
    }
  }

  .control-btn {
    flex-shrink: 0;
    ::v-deep .el-dropdown {
      color: #fff;
      .el-button {
        background: transparent;
        border: none;
        color: #fff;
        border-bottom: 1px solid $activeMenuText;
        border-radius: 0;
      }
    }
  }
}
</style>
